<template>
	<view class="container">
		<carHeader>
			<slot>
				<uni-nav-bar color="white" :border="false" background-color="rgba(255,255,255,0.0)" left-icon="chat"
					:title="'首 页'"></uni-nav-bar>
			</slot>
		</carHeader>
		<view class="headsearch">
			 <div class="custom-input-wrapper">  
			
			    <image @click="handleClickIcon" class="custom-prepend-icon" src="/static/车联网服务-00首页_slices/定位2.png" mode="aspectFit"></image>  
			    <input type="text" placeholder="请输入内容" style="width: 60%;margin-left: 16rpx;" v-model="nowName" />  
			    <image class="custom-append-icon" src="/static/车联网服务-00首页_slices/刷新 (1).png" mode="aspectFit" @click="reflush"></image>  
				<text>刷新</text>
			  </div> 
			
		</view>
		
		<view class="btns">
			
			<view class="btn" @click="repair">
				<view class="cars1">
				<image src="/static/车联网服务-00首页_slices/车辆维修1-01.png"></image>
				</view>
				<text>车辆维修</text>
			</view>
			<view  class="btn" @click="maintenance">
				<view class="cars2">
				<image src="../../static/车联网服务-00首页_slices/保养.png" ></image>
				</view>
				<text>汽车保养</text>
			</view>
			<view  class="btn" @click="watch">
				<view class="cars3">
				<image src="../../static/车联网服务-00首页_slices/洗车.png" ></image>
				</view>
				<text>专业洗车</text>
			</view>
			<view  class="btn" @click="comeon">
				<view class="cars4">
				<image src="/static/车联网服务-00首页_slices/加油枪 (1).png"></image>
				</view>
				<text>就近加油</text>
			</view>
		</view>
		
		<view class="map">
			<view class="title">
			<view class="title1"><h3>附近加油站</h3></view>
			<view class="title2">根据您的位置推荐最近的加油站</view>
			<view class="more">更多></view>
			</view>
			
			<view class="littleMap">
				<map style="width: 90%;
				 height: 200px;
				 padding-left: 5%;" 
				 :latitude="latitude"
				  :longitude="longitude" 
				  :markers="covers">
				</map>
			</view>
		
		</view>
		
		<view class="group">
			<view class="title">
			<view class="title1"><h3>优惠团购</h3></view>
			<view class="title2">钜惠来袭  为您的爱车续航</view>
			<navigator open-type="navigate" url="/pages/tuangouyouhui/tuangouyouhui">
				<view class="more">更多></view>
			</navigator>
			</view>
			<view class="all1" >
			<view v-for=" item of groupList"  class="all">
				<view class="tuangou">
					<view class="imgInfo">
				<image src="/static/车联网服务-00首页_slices/图层 1@3x.png"></image>
				</view>
				<view class="info">
					<text space="nbsp">
					    汽车惠民活动走进...
					</text>
				</view>
				</view>
			</view>
			</view>	
		</view>
		<view class="null">
			
		</view>
		<view class="bottom">
			
			<view class="two">
				<view class="leftImg">
					<image src="/static/车联网服务-00首页_slices/首页.png"></image>
				</view>
				<navigator open-type="navigate" url="/pages/emergencyRescue/emergencyRescue">
					<view class="centerImg">
						<image src="/static/车联网服务-00首页_slices/示警.png"></image>
					</view>
				</navigator>
				<view class="rightImg">
					<navigator open-type="reLaunch" url="/pages/grzx/grzx">
						<image src="/static/车联网服务-00首页_slices/我的-我的.png"></image>
					</navigator>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowName: '', 
				groupList:4,
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '/static/车联网服务-00首页_slices/定位2.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '/static/车联网服务-00首页_slices/定位2.png'
			}]
		}
		},
		onLoad(options) {
			
			console.log(options); // 查看options对象的内容  
			let name = options.nowName;
			if(name!=null){
				console.log(name);
				this.nowName=name;
			}else{
				this.nowCity();
			}	
			
		},
		methods: {
			//repair  车辆维修页面跳转
			repair(){
				console.log("跳转到车辆维修页面");
			},
			maintenance(){
				console.log("车辆保养");
			},
			watch(){
				uni.navigateTo({
					url:"/pages/washCar/washCar"
				})
			},
			comeon(){
				console.log("跳转到就近加油");
			},
			
			//刷新
			reflush(){
				this.nowCity();
			},		
			//获取当前位置
			nowCity() {
				uni.request({
					url: 'https://elm.cangdu.org/v1/cities?type=guess', // 这里指定具体的URL
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						// console.log(res.data.name);
						this.nowName = res.data.name;
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			
			//跳转选择城市页面
			handleClickIcon(){
				console.log("前置图标被点击了！！！");
				this.inputValue = ''; 
				uni.navigateTo({
					url:"/pages/local/local",
					data:this.inputValue
				})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		height:1335rpx;
		width: 100%;
		background-color: #F7F7F7;
	}
	.custom-input-wrapper {  
	  
	  position: relative;  
	  display: flex;  
	  align-items: center; /* 垂直居中 */  
	}  
	  
	.custom-prepend-icon, .custom-append-icon {  
	  width: 20px; /* 根据需要调整 */  
	  height: 20px; /* 根据需要调整 */  
	  /* 其他样式，如外边距等 */  
	}  
	.custom-prepend-icon{
		margin-left: 20rpx;
	}
	.custom-append-icon {
		margin-left: 80rpx;
	}
	  
	input[type="text"] {  
	  flex: 5; /* 占据剩余空间 */   
	}  
	
	

	.headsearch {
		background-color: #fff;
		width: 95%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx 2.5%;
		border-radius: 40rpx;
		position: absolute;
		top: 80rpx;
		u--input {
			color: #000000;
		}
	}
	.prepend-icon{
		background-color: #23ea23;
		z-index:3;
	}
	
	.btns{
		overflow: hidden;
		width: 92%;
		height: 260rpx;
		border: solid 2rpx #ffffff;
		background-color: #ffffff;
		border-radius: 26rpx;
		margin:  auto;
		position: relative;
		top: -100rpx;
	}
	.btn{
		float: left;
		/* background-color: #25ee25; */
		border-radius: 20rpx;
		width: 20%;
		height: 200rpx;
		border: solid 2rpx #ffffff;
		margin-left: 3.4%;
		margin-top: 30rpx;
		text-align: center;
		line-height: 80rpx;
		
	}
	.cars1,.cars2,.cars3,.cars4{
		height: 120rpx;
		border-radius: 40rpx;
		border: solid 2rpx #ffffff;
		
	}
	.cars1{
		background-image:  linear-gradient(to right, rgb(69,146,247), rgb(80,74,244));
	}
	.cars2{
		background-image:  linear-gradient(to right, rgb(253,197,69), rgb(255,164,55));
	}
	.cars3{
		background-image:  linear-gradient(to right, rgb(175,239,73), rgb(66,216,43));
	}
	.cars4{
		background-image:  linear-gradient(to right, rgb(135,194,255), rgb(67,139,251));
	}
	.cars1 image{
		padding:25rpx;
		padding-top: 35rpx;
		width: 84rpx;
		height: 50rpx;

	}
	.cars2 image,.cars3 image,.cars4 image{
		padding:20rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.map,.group{
		background-color: #ffffff;
		width: 92%;
		height: 550rpx;
		margin: auto;
		margin-top: 20rpx;
		border: 2rpx solid #ffffff;
		border-radius: 26rpx;
	}
	.map{
		position: relative;
		top: -100rpx;
	}
	.group{
		position: relative;
		top: -100rpx;
		margin-bottom: 80rpx;
		height: 680rpx;
	}
	.title{
		padding-top: 36rpx;
		padding-left: 16rpx;
	}
	.title2{
		font-size: 20rpx;
		color: #D1D1D1;
		line-height: 60rpx;
	}
	map{
		position: relative;
		top: -30rpx;
	}
	.more{
		/* background-color: blue; */
		float: right;
		position: relative;
		top: -70rpx;
		right: 18rpx;
	}
	.all{
		position: relative;
		top: -40rpx;
		/* overflow: hidden; */
		float: left;
		width: 50%;
		/* background-color: #43ea43; */
	}
	.title{
		overflow: hidden;
	}

	.tuangou{
		float: left;
		/* box-sizing: border-box; */
		border: solid 2rpx #ffffff;
		margin-top: 20rpx;
		margin-left: 20rpx;
		/* background-color: #ea32ea; */
	}
	.tuangou image{
		width: 280rpx;
		height: 180rpx;
		border-radius: 24rpx;
		
	}
	.bottom{
		height: 200rpx;
		/* overflow: hidden; */
		  position: fixed;  		
		  bottom: -100rpx;  		
		  width: 100%; 
	}
	.two{
		height: 100rpx;
		background-image: url("/static/车联网服务-00首页_slices/矩形 12 拷贝.png");
	}
	.leftImg image,.centerImg image,.rightImg image{	
			width:44rpx;
			height:46rpx;
	}
	.leftImg{
		float: left;
		position: relative;
		top: 25rpx;
		left: 18%;
	}
	.rightImg{
		float: left;
		position: relative;
		top: 25rpx;
		left: 55%;
	}
	.centerImg image{
		padding-top: 42rpx;
		padding-left: 49rpx;
	}
	.centerImg{
		width: 145rpx;
		height: 145rpx;
		background-color: #FF5C1B;
		float: left;
		position: relative;
		top: -64rpx;
		left: 34%;
		border-radius: 50%;
		
	}
	.null{
		height: 2rpx;
	}
	
</style>